<template>
  <div class="wrapper ng-scope">
    <div class="dialog dialog-shadow">
      <h4 class="title">短信验证码登录</h4>
    </div>
    <div class="content ng-scope">
      <form
        action=""
        class="
          login-form
          form-v2
          ng-scope ng-pristine ng-invalid ng-invalid-required
        "
        name="form"
      >
        <ul class="common-form">
          <li class="country-region ng-scope">
            <div class="input">
              <span class="cr"> 国家和地区</span>
              <span role="button" class="country ng-binding" title="中国"
                >{{ title }}
              </span>
            </div>
          </li>
          <van-form @submit="onSubmit" @failed="onFail" class="form">
            <van-field
              v-model="form.phone"
              clearable
              name="phone"
              type="tel"
              placeholder="手机号"
              :label="label"
              label-width="50px"
              :rules="[
                {
                  required: true,
                  message: '手机号错误',
                },
                { pattern: reg.phone, message: '手机号格式错误' },
              ]"
              @blur="checkPhone"
            />

            <van-field
              v-model="form.captcha"
              type="number"
              name="captcha"
              center
              clearable
              placeholder="短信验证码"
              :rules="[
                {
                  required: true,
                  message: '输入有效验证码',
                },
                { pattern: reg.code, message: '长度为4位的验证码' },
              ]"
              class="form-1"
            >
              <template #button>
                <van-button
                  size="small"
                  type="primary"
                  native-type="button"
                  :disabled="!flag"
                  @click="startSend"
                  v-if="toggle"
                  >发送验证码</van-button
                >
                <van-button v-else size="small" disabled native-type="button">
                  剩余 {{ count }} S</van-button
                >
              </template>
            </van-field>
            <div style="margin: 16px">
              <van-button round block type="primary" native-type="submit"
                >登录</van-button
              >
            </div>
          </van-form>
        </ul>

        <div class="remember">
          <div class="automatic">
            <!-- <van-radio-group>
              <van-checkbox v-model="checked">自动登录</van-checkbox>
            </van-radio-group> -->

            <p class="forgotpassword ng-binding">
              <router-link :to="{ name: 'logins' }" class="color2"
                >帐号密码登录</router-link
              >
            </p>

            <p class="registercloud ng-binding">
              <router-link to="" class="color1"
                >未注册的手机号验证后将自动注册</router-link
              >
            </p>
          </div>
        </div>
      </form>
    </div>
    <div class="info-wrapper2 clearfix">
      <ul class="login-three ng-scope">
        <li class="douyin ng-scope"></li>
        <li class="toutiao ng-scope"></li>
        <li class="weibo"></li>
        <li class="qq ng-scope"></li>
      </ul>
    </div>
    <div class="agreement">
      <p>
        <span>登录代表你已同意</span>
        <a href="">用户协议</a>
        和
        <a href="">隐私政策</a>
      </p>
    </div>
  </div>
</template>


<script>
var timer = null;
export default {
  data() {
    return {
      title: "中国",
      label: "+86",
      form: {},
      checked: true,
      flag: false,
      count: 60,
      toggle: true,
    };
  },
  mounted() {},
  methods: {
    startSend() {
      this.toggle = false;
      this.count--;
      timer = setInterval(() => {
        if (this.count > 0) {
          this.count--;
        } else {
          clearInterval(timer);
          timer = null;
          this.toggle = true;
          this.count = 60;
        }
      }, 1000);

      // ajax
      // 直接发送验证码
      this.$ajax
        .sendCaptcha({
          phone: this.form.phone,
        })
        .then((res) => {
          if (res.code == 200) {
            this.$notify({ type: "success", message: "验证码发送成功" });
          } else {
            this.$notify({ type: "success", message: "验证码发送失败" });
          }
        });
    },
    checkPhone() {
      this.flag = this.reg.phone.test(this.form.phone);
    },
    destroyed() {
      clearInterval(timer);
      timer = null;
    },
    onSubmit(value) {
      console.log(value);
      // 判断有没有注册

      this.$ajax.verifyCaptcha(value).then((res) => {
        if (res.code == 200) {
          // this.$notify({ type: "success", message: "校验成功" });

          // 判断手机号是否注册
          this.$ajax
            .findUser({
              phone: value.phone,
            })
            .then((res) => {
              if (res.length > 0) {
                this.$ajax
                  .findUser({
                    phone: value.phone,
                    password: value.password,
                  })
                  .then((res) => {
                    if (res.length > 0) {
                      this.$notify({ type: "success", message: "成功登录" });
                      this.$router.push({ name: "center" });
                      // 用户信息存储 Vuex
                      this.changeUserInfo(res[0]);
                    }
                  });
              } else {
                this.$ajax.addUser(value).then((res) => {
                  this.$notify({
                    type: "success",
                    message: "注册成功自动登录",
                  });
                  this.$nextTick(() => {
                    this.$router.push({ name: "center" });
                    // 用户信息存储 Vuex
                    this.changeUserInfo(res[0]);
                  });
                });
              }
            });
        } else
          this.$notify({ type: "success", message: "校验失败,验证码不对" });
      });
    },
    onFail() {
      this.$toast("请输入有效的信息");
    },
  },
};
</script>


<style lang="scss" scoped>
.wrapper {
  background-color: #f1f1f1;
  width: 100%;
  height: 100%;
}
.ng-scope {
  .dialog-shadow {
    background-color: #1d1d1d;
    background-image: none;
    margin: 0;
    padding: 0;
    height: auto;
    .title {
      text-indent: inherit;
      position: static;
      color: #fff;
      font-size: 20px;
      line-height: 2.8em;
      font-weight: 400;
      bottom: 0;
      width: 100%;
      text-align: center;
      margin: 0;
      padding: 0;
      border-bottom: 0;
      height: auto;
    }
  }
  .content {
    margin: 14px 12px 0;
    padding: 0;
    .login-form {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
      .common-form {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
        .country-region {
          margin: 0 0 12px;
          overflow: hidden;
        }
        .input {
          border-radius: 4px;
          box-shadow: 0 3px 5px -4px rgb(0 0 0 / 40%) inset,
            -1px 0 3px -2px rgb(0 0 0 / 10%) inset;
          background-color: #fff;
          border: 1px solid #d1d1d1;
          height: 44px;
          line-height: 33px;
          opacity: 1 !important;
          overflow: hidden;
          position: relative;
          .cr {
            position: absolute;
            left: 10px;
            line-height: 44px;
            display: inline-block;
            text-align: center;
            font-size: 16px;
          }
        }
        .ng-binding {
          position: absolute;
          right: 10px;
          font-size: 15px;
          line-height: 44px;
          display: inline-block;
          max-width: 76px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding-right: 20px;
          text-align: right;
          background-image: url(https://static.smartisanos.cn/account.common/img/v2/m/ic_change_7ce7ba3a23.png);
          background-size: auto 9px;
          background-repeat: no-repeat;
          background-position: right center;
          cursor: pointer;
          z-index: 100;
          color: #7f7f7f;
        }
      }
    }
  }
  .username {
    border-bottom: 0;
    border-radius: 6px 6px 6px 6px;

    margin-bottom: 0;
    background-color: #fff;
    border: 1px solid #d1d1d1;
    margin: 0 0 12px;
    overflow: hidden;
    position: relative;
    padding: 0;
    font: inherit;
    vertical-align: baseline;
    .form-1 {
      opacity: 0.618;
      border-top: 0;
      box-shadow: 0 3px 5px -4px rgb(0 0 0 / 40%) inset,
        -1px 0 3px -2px rgb(0 0 0 / 10%) inset;
      background: 0 0;
      border: none;
      height: 44px;
    }
  }

  .remember {
    position: relative;
    margin: 14px 12px 20px;
    height: 14px;
    overflow: visible;

    .automatic {
      font-size: 14px;
      color: #7f7f7f;
      //   display: flex;

      .van-radio-group {
        float: left;
      }
      .registercloud {
        margin-left: 0;
        float: right;
        right: 68px;
        padding-right: 30px;
      }
      .forgotpassword {
        float: right;
        font-size: 14px;
      }
    }
  }
  .login-three {
    bottom: 50px;
    display: flex;
    justify-content: center;
    position: fixed;
    margin: 0 auto;
    width: 248px;
    margin-right: -124px;
    right: 50%;
    .douyin {
      display: block;
      background-image: url(https://static.smartisanos.cn/account.common/img/v2/m/douyin_edc179bd65.png);
      text-align: center;
      color: #999;
      font-size: 12px;
      line-height: 17px;
      background-size: auto 40px;
      background-position: 0 0;
      width: 42px;
      height: 40px;
      margin: 0 10px;
      float: left;
      cursor: pointer;
      background-repeat: no-repeat;
      transition: all 1s ease;
    }
    .toutiao {
      display: block;
      background-image: url(https://static.smartisanos.cn/account.common/img/v2/m/toutiao_3497cd7c41.png);
      text-align: center;
      color: #999;
      font-size: 12px;
      line-height: 17px;
      background-size: auto 40px;
      background-position: 0 0;
      width: 42px;
      height: 40px;
      margin: 0 10px;
      float: left;
      cursor: pointer;
      background-repeat: no-repeat;
      transition: all 1s ease;
    }
    .weibo {
      background-position: -59px 0;
      color: #999;
      font-size: 12px;
      line-height: 17px;
      background-image: url(https://static.smartisanos.cn/account.common/img/v2/m/icons_c3a3154da5.png);
      background-size: auto 40px;
      width: 42px;
      height: 40px;
      margin: 0 10px;
      float: left;
      cursor: pointer;
      background-repeat: no-repeat;
      transition: all 1s ease;
    }
    .qq {
      background-position: -119px 0;
      color: #999;
      font-size: 12px;
      line-height: 17px;
      background-image: url(https://static.smartisanos.cn/account.common/img/v2/m/icons_c3a3154da5.png);
      background-size: auto 40px;
      width: 42px;
      height: 40px;
      margin: 0 10px;
      float: left;
      cursor: pointer;
      background-repeat: no-repeat;
      transition: all 1s ease;
    }
  }
  .agreement {
    position: fixed;
    font-size: 14px;
    color: #7f7f7f;
    margin: 0 auto;
    margin-left: -12px;
    width: 100%;
    bottom: 20px;
    text-align: center;
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
    a {
      color: #5c89f2;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.3s ease;
      padding: 0 3px;
    }
  }
  .color1 {
    color: #7f7f7f;
  }
  .color2 {
    color: #5079d9;
  }
}
</style>